<template>
	<div class="login">
        <SRV-topbar :title="pageTitle" :isLeft="true"></SRV-topbar>
		<div class="top">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/my/login.png" mode="widthFix"></image>
		</div>
        <view class="parent" v-if="parentInfo.mobile != ''">
        	<image :src="parentInfo.head_portrait" mode="aspectFill"></image>
        	<view class="txt">
        		<view class="txt_top">
        			<text class="oneline">{{parentInfo.realname}}</text>
        			<text class="oneline">{{parentInfo.mobile}}</text>
        		</view>
                <view class="adv_txt">邀请您加入超圳时代！</view>
        	</view>
        </view>
        <div class="content">
            <div class="other">
            	<!-- <button class="wechatLogin" v-if="wechatStep == 1" type="default" open-type='getPhoneNumber' @getphonenumber="getPhoneNumber">
            		<image src="https://app.chinasrv.com/attachment/xcx/my/icon_login_wechat.png"></image>
                    <view>微信登录</view>
            	</button> -->
                <view class="maskBtn" v-if="!isCheckRule" @click="checkRule(1)">  </view>
                <button class="wechatLogin2" v-if="wechatStep == 1" type="default" open-type='getPhoneNumber' @getphonenumber="getPhoneNumber">
                	手机号快捷登录
                </button>
            </div>
			<p style="height: 60upx;">&nbsp;</p>
        </div>
		<div class="content">
			<div class="line">
				<label>+86</label>
				<p><input type="text" placeholder="请输入手机号码" placeholder-class="placeholder" v-model="mobile" /></p>
			</div>
			<div class="line">
				<label>验证码</label>
				<p>
					<input type="text" placeholder="请输入验证码" placeholder-class="placeholder" v-model="code" />
					<span @click="sendCode()">{{sendCodeTxt}}</span>
				</p>
			</div>
			<button @click="login()" v-if="isLogin">{{btnName}}</button>
		</div>
        <view class="deal">
            <view :class="isCheckRule?'sel':'nosel'" @click="isCheckRule = !isCheckRule"></view>
            <view>
            <text @click="isCheckRule = !isCheckRule">已阅读并同意</text>
            <text class="jumpBtn" @click="jump('agreement', 'register')">《用户协议》</text>、<text class="jumpBtn" @click="jump('agreement', 'privacy')">《隐私政策》</text>
            <text @click="isCheckRule = !isCheckRule">，若您的手机号未注册，将为您直接注册账号</text>
            </view>
        </view>
		<uni-popup ref="enroll" type="center">
			<view class="enroll-box">
				<view class="enroll-con">
					新用户登录需要微信授权，用于完善用户信息
				</view>
				<view class="enroll-but-box">
					<button class="enroll-but" v-if="!canIUseGetUserProfile" type="default" open-type='getUserInfo' @getuserinfo="getUserInfo" >
						微信授权
					</button>
					<button class="enroll-but" v-if="canIUseGetUserProfile" type="default" @tap="getUserProfile" >
						微信授权
					</button>
					
					<button class="enroll-but-2" type="default" @click="jump('my')">
						直接进入
					</button>
				</view>
			</view>
		</uni-popup>
	
	
	</div>
</template>
<script> 
    var _self;
	import serve from '../../static/request.js';
	import common from '../../static/jump.js';
	// import ShareIndex from '../../static/share.js';
	export default {
		// mixins: [ShareIndex],
		data() {
			return {
                pageTitle: '登录/注册',
                btnName: '登录/注册',
				realname: '',
				mobile: '',
				code: '',
				sendCodeTxt: '获取验证码',
				isSendCode: false,
				isLogin: true,
				isCheckRule: false,
				canIUseGetUserProfile: false,
                parentInfo: {
                    realname: '',
                    head_portrait: '',
                    mobile: ''
                },
				wechatLogin:{
					appkey: uni.getStorageSync('appkey'),
					group: uni.getStorageSync('group'),
					parentKey: uni.getStorageSync('parentKey'),
					wechatCode: '',
					encryptedData: '',
					iv: '',
				},
				editInfo:{
					appkey: uni.getStorageSync('appkey'),
					'access-token': '',
					group: uni.getStorageSync('group'),
					username: '',
					head_portrait: '',
				},
				wechatStep: 1,
			};
		},
		methods: {
            getParentInfo() {
                if(uni.getStorageSync('parentKey') == '') {
                    return ;
                }
                serve.request({
                	url: '/site/get-parent',
                	data: {
                		appkey: uni.getStorageSync('appkey'),
                        parentKey: uni.getStorageSync('parentKey'),
                	},
                    v: '/v2'
                }).then(res => {
                    if(res.code != 200) {
                        return ;
                    }
                    _self.pageTitle = '邀请注册';
                    _self.btnName = '注册';
                    _self.parentInfo = res.data;
                });
            },
			login() {
				if (_self.mobile == '') {
					uni.showToast({
						title: '手机号码不能为空',
						icon: 'none'
					});
					return;
				}
				if (_self.code == '') {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					});
					return;
				}
				_self.getUserCode();
				serve.request({
					url: '/site/mobile-login',
					data: {
						mobile: _self.mobile,
						code: _self.code,
						appkey: uni.getStorageSync('appkey'),
						group: uni.getStorageSync('group'),
                        parentKey: uni.getStorageSync('parentKey'),
						wechatCode: _self.wechatLogin.wechatCode,
					},
                    v: '/v3'
				}).then(res => {
					if (res.code != 200) {
						_self.getUserCode();
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						return ;
					}
					uni.setStorageSync('access-token', res.data.access_token);
                    uni.setStorageSync('parentKey', res.data.parentKey);
					_self.editInfo["access-token"] = res.data.access_token;
                    common.jump('my');
					// if(res.data.isNew == 1) {
					// 	_self.$refs.enroll.open();
					// 	return ;
					// }
					// uni.showToast({
					// 	title: res.message,
					// 	icon: 'none',
					// 	success() {
					// 		setTimeout(function() {
					// 			common.jump('return_one');
					// 		}, 1000)
					// 	}
					// });
				});
			},
			sendCode() {
				if (_self.mobile == '') {
					uni.showToast({
						title: '请填写手机号码',
						icon: 'none'
					});
					return;
				}
                if(!_self.isCheckRule) {
                    _self.checkRule(2); 
                    return false;
                }
				if (_self.isSendCode != false) {
					return ;
				}
				serve.request({
					url: '/site/sms-code',
					data: {
						appkey: uni.getStorageSync('appkey'),
						mobile: _self.mobile,
						usage: _self.isLogin ? 'login' : 'register',
					}
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					if (res.code == 200) {
						_self.isSendCode = true;
						_self.countDown(60);
					}
				});
			},
			countDown(timeLenght) {
				let self = this;
				timeLenght--;
				if (timeLenght == 0) {
					_self.sendCodeTxt = '获取验证码';
					_self.isSendCode = false;
					return;
				}
				_self.sendCodeTxt = timeLenght + ' S';
				setTimeout(function() {
					_self.countDown(timeLenght);
				}, 1000);
			},
			getUserCode() {
				uni.login({
					success: function (res) {
						_self.wechatLogin.wechatCode = res.code;
					},
				});
			},
            checkRule(type) {
                uni.showModal({
                	title: '提示',
                	content: '请确定并同意页面底部用户协议、隐私政策！',
                    confirmText: "确定",
                    cancelText: "我再想想",
                	success: function (res) {
                		if (res.confirm) {
                			_self.isCheckRule = !_self.isCheckRule;
                            if(type == 2) {
                                _self.sendCode();
                            }
                		} else if (res.cancel) {
                			console.log('用户点击取消');
                		}
                	}
                });
                return false;
            },
			getPhoneNumber(e){
				if(e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.setStorageSync('is_logout', true);
					return ;
				}
				_self.wechatLogin.iv = encodeURIComponent(e.detail.iv);
				_self.wechatLogin.encryptedData = encodeURIComponent(e.detail.encryptedData);
				_self.wechatLoginFun();
			},
			wechatLoginFun() {
				var self = this;
				if(_self.wechatLogin.encryptedData == 'undefined' || _self.wechatLogin.iv == 'undefined') {
                    uni.showToast({
                    	title: '未通过授权，请重新授权！',
                    	icon: 'none'
                    });
					return ;
				}
				serve.request({
					url: '/site/wechat-login',
					data: _self.wechatLogin,
                    v: '/v3'
				}).then(res => {
					if (res.code != 200) {
						_self.getUserCode();
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						return ;
					}
					uni.setStorageSync('access-token', res.data.access_token);
                    uni.setStorageSync('parentKey', res.data.parentKey);
					_self.editInfo["access-token"] = res.data.access_token;
                    common.jump('my');
					// if(res.data.isNew == 1) {
					// 	_self.$refs.enroll.open();
					// 	return ;
					// }
					// common.jump('return_one');
				});
			},
			getUserInfo(){
				var self = this;
				wx.getUserInfo({
					success:function(res){
						_self.editInfo.username = res.userInfo.nickName;
						_self.editInfo.head_portrait = res.userInfo.avatarUrl;
						_self.wechatRegisterFun();
					},
					fail:function(e){
						uni.showToast({
							title: '当前微信版本不支持，请升级',
							icon: 'none'
						});
					}
				});
				return ;
			},
			getUserProfile: function(e) {
				var self = this;
				wx.getUserProfile({
					desc: '用于完善会员资料', 
					success: (res) => {
						_self.editInfo.username = res.userInfo.nickName;
						_self.editInfo.head_portrait = res.userInfo.avatarUrl;
						_self.wechatRegisterFun();
					}
				})
			},
			wechatRegisterFun() {
				serve.request({
					url: '/member/member/edit-info',
					data: _self.editInfo,
                    v: '/v2',
				})
				.then(res => {
					let resultCode = res.code;
					uni.showToast({
						title: res.message,
						icon: 'none',
						success() {
							if(resultCode == 200) {
								setTimeout(function() {
									common.jump('my');
								}, 1000)
							}
						}
					});
					_self.getUserCode();
				});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			_self = this;
			if (wx.getUserProfile) {
				_self.canIUseGetUserProfile = true;
			}
            var nowKey = options.parentKey || '';
            if(nowKey != '') {
                uni.setStorageSync('parentKey', nowKey);
                _self.wechatLogin.parentKey = nowKey;
            }
		},
		onShow() {
            _self.getUserCode();
            _self.getParentInfo();
		}
	};
</script>
<style lang="scss" scoped>
	.login {
        .parent {
        	display: flex;
        	align-items: center;    
            padding: 20rpx 30rpx;
            border-bottom: 1rpx solid #eaeaea;
            
        	image {
        		width: 100rpx;
        		height: 100rpx;
        		border-radius: 50%;
        	}
        
        	.txt {
        		margin-left: 30rpx;
        		display: flex;
        		justify-content: center;
        		flex-direction: column;
        		text:first-child{
        			color: #333333;
        			font-size: 32rpx;
        			margin-right: 19rpx;
        		}
        		text:last-child {
        			color: #999999;
        			font-size: 28rpx;
        		}
        	}
            .adv_txt{
                color: #f60;
                font-size: 40rpx;
            }
        }
		.top {
			width: 750upx;
			// height: 390upx;
			position: relative;

			>image {
				width: 750upx;
				height: 390upx;
			}

			.tabbar {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 88upx;
				display: flex;
				align-items: center;

				>div {
					flex: 1;
					line-height: 88rpx;
					text-align: center;
					font-size: 32upx;
					font-weight: bolder;
					font-family: Microsoft YaHei UI;
					font-weight: 400;
					color: rgba(#ffffff, 1);
					opacity: 1;
					border-bottom: 5upx #7bc9d3 solid;
				}

				.check {
					opacity: 1;
					font-size: 36upx;
					border-bottom: 5upx #ffcc00 solid;
				}
			}
		}

		.content {
			.line {
				display: flex;
				align-items: flex-end;
				padding-left: 40upx;
				margin-top: 63upx;

				&:nth-child(2) {
					margin-top: 74upx;
				}

				label {
					display: block;
					width: 160upx;
					padding-bottom: 20upx;
				}

				p {
					display: flex;
					align-items: flex-end;
					border-bottom: 1px solid #ebecf0;
					padding-bottom: 20upx;
					flex: 1;

					input {
						color: #3c4868;
						flex: 1;
					}

					.placeholder {
						color: rgba(60, 72, 104, 0.2);
					}

					span {
						font-size: 32upx;
						color: #eb5938;
						margin-right: 30upx;
					}
				}
			}

			button {
				width: 640upx;
				height: 100upx;
				line-height: 100upx;
				color: #fff;
				background: rgba(255, 200, 10, 1);
				border-radius: 50upx;
				display: block;
				margin: 60upx auto;
				font-size: 32upx;

				&::after {
					border: none;
				}
			}
		}
	}
    .maskBtn {
        position: absolute;
        width: 84%;
        height: 100rpx;
        padding: 0 60rpx;
        z-index: 99;
    }
    .deal{
    	font-size: 30upx;
    	padding: 20upx;
        display: flex;
        align-items: center;
        .jumpBtn{
            color:#ffd900;
        }
    	.sel {
    		background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/icon37.png);
    		background-repeat: no-repeat;
    		width:60upx;
    		height:35upx;
    		background-size: 100%;
    		margin-right: 20upx;
    	}
    	
    	.nosel {
    		width: 50upx;
    		height: 33upx;
    		border: 1upx solid #999999;
    		border-radius: 50%;
    		margin-right: 20upx;
    	}
    }
	.enroll-box{
		background: white;
		padding: 40rpx 30rpx 40rpx 30rpx;
		width: 480rpx;
		border-radius: 8rpx;
		font-size: 32rpx;
		color: #333;
	}
	.enroll-con{
		text-align: center;
		font-size: 36rpx;
		line-height: 60rpx;
	}
	.enroll-but{
		background: #39b54a;
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		color: #fff;
		margin-top: 60rpx;
	}
	.enroll-but-2{
		background: #b9b9b9;
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		color: #fff;
		margin-top: 40rpx;
	}
</style>

